import React, {Component} from 'react';
import {
    Modal,
    FlatList,
    StyleSheet,
    View,
    TouchableOpacity,
    TextInput,
    Text, Image,
} from 'react-native';
import GlobalStyles from '../../common/styles/GlobalStyles';
import AntDesign from 'react-native-vector-icons/AntDesign';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import {StylesConstant} from '../../common/Constant';
import HttpUtils from '../../expand/dao/HttpUtils';
import {BASE_URL} from '../../common/BASE_URL';
import ToastUtil from '../../utils/ToastUtil';

export default class EnterpriseDialog extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchText: '',
            dataList: [],
            visible: false,
            loading: true
        };
    }

    show() {
        this.canClose = false;
        this.loadDataList()
        this.setState({
            visible: true,
        });
    }

    dismiss() {
        this.setState({
            visible: false,
        });
    }

    loadDataList(){
        this.state.loading = true
        HttpUtils.request({
            url: BASE_URL.apiBaseUrl + '/app/viewLegalPerson',
            params: {
            }
        }).then((res) => {
            if(!res.status){
                console.log("单位1",res.content)
                this.setState({
                    loading: false,
                    dataList: res.content
                })
            }
        }).catch(() => {
            ToastUtil.info('网络异常,请稍后再试');
            this.setState({
                loading: false
            })
        });
    }



    clickItem(item) {
        this.props.onChoose && this.props.onChoose(item);
        this.dismiss()
    }

    _renderItem(data) {
        const {item} = data
        console.log("单位",item)
        return (
            <TouchableOpacity
                onPress={() => this.clickItem(item)}
                style={{ backgroundColor: 'white',
                    padding: 10,
                    borderBottomWidth: 1,
                    borderColor: '#efefef'
                }}
            >
                <View>
                    <View style={styles.listRowTitle}>
                        <View style={{flex:1,flexDirection: 'row'}}>
                            <Image source={require('../../assets/images/item/icon_case.png')} style={{width: 20,height: 20,marginRight: 10}} />
                            <Text style={{color: '#333333'}}>{item.unitName}</Text>
                        </View>
                    </View>
                    <View style={{padding:5,paddingTop: 10,paddingBottom: 10}}>
                        <View style={styles.listRow}>
                            <View style={styles.listRowLabel}>
                                <Image source={require('../../assets/images/item/icon_type.png')} style={{width: 18,height: 18,marginRight: 5}} />
                                <Text style={{color: '#A8A8A9'}}>信用代码：</Text>
                            </View>
                            <Text style={styles.listRowValue}>{item.socialCreditCode}</Text>
                        </View>
                        <View style={styles.listRow}>
                            <View style={styles.listRowLabel}>
                                <Image source={require('../../assets/images/item/icon_local.png')} style={{width: 18,height: 18,marginRight: 5}} />
                                <Text style={{color: '#A8A8A9'}}>单位地址：</Text>
                            </View>
                            <Text style={styles.listRowValue}>{item.unitAddress}</Text>
                        </View>
                        <View style={styles.listRow}>
                            <View style={styles.listRowLabel}>
                                <Image source={require('../../assets/images/item/icon_user.png')} style={{width: 18,height: 18,marginRight: 5}} />
                                <Text style={{color: '#A8A8A9'}}>法人代表：</Text>
                            </View>
                            <Text style={styles.listRowValue}>{item.legalPersonName}</Text>
                        </View>
                        <View style={styles.listRow}>
                            <View style={styles.listRowLabel}>
                                <Image source={require('../../assets/images/item/icon_time.png')} style={{width: 18,height: 18,marginRight: 5}} />
                                <Text style={{color: '#A8A8A9'}}>代表电话：</Text>
                            </View>
                            <Text style={styles.listRowValue}>{item.legalPersonTelephone}</Text>
                        </View>
                    </View>

                </View>
            </TouchableOpacity>
        );
    }

    _filterResult(result) {
        const text = this.state.searchText;
        if (!result || result.length === 0 || !text) {
            return result;
        } else {
            const data = result.filter(item => {
                return (item.name && item.name.indexOf(text) !== -1) ||
                    (item.contactPhone && item.contactPhone.indexOf(text) !== -1) ||
                    (item.contactAddress && item.contactAddress.indexOf(text) !== -1);
            });
            return data;
        }
    }

    renderContentView() {
        const {dataList,loading} = this.state;
        let result = dataList
        const filterData = this._filterResult(result) || [];
        return (
            <Modal
                animationType={'slide'}
                transparent={true}
                visible={this.state.visible}
                onRequestClose={() => {
                    if (!this.canClose) {
                        this.dismiss();
                        this.setState({
                            searchText: '',
                        });
                    }
                }}
            >
                <View style={[GlobalStyles.modalContainer,{borderWidth:1,borderColor: '#efefef',}]}>
                    <View style={GlobalStyles.searchInputContainer}>

                        <TextInput
                            style={GlobalStyles.searchIpt}
                            ref="input"
                            multiline={false}
                            placeholder={'单位关键字检索'}
                            onChangeText={(text) => {
                                this.setState({
                                    searchText: text,
                                });
                            }}
                        />
                        {!this.canClose ?
                            <TouchableOpacity onPress={() => {
                                this.dismiss();
                                this.setState({
                                    searchText: '',
                                });
                            }}>
                                <AntDesign
                                    name={'closecircle'}
                                    size={18}
                                    style={{paddingLeft: 5, paddingRight: 5, marginLeft: 5}}
                                    color={StylesConstant.themeIconColor}
                                />
                            </TouchableOpacity> : null
                        }
                    </View>
                    {result && result.length > 0 ?
                        <FlatList
                            data={filterData}
                            renderItem={item => this._renderItem(item)}
                            keyExtractor={item => item.counterpartId+''+item.unitName}
                            onMomentumScrollBegin={() => {
                                this.refs.input.blur();
                            }}
                        />
                        : <View style={{alignItems: 'center'}}>
                            <Text style={{color: '#999'}}>{loading?'加载中...':'未找到相关数据'}</Text>
                        </View>
                    }
                </View>
            </Modal>
        );
    }

    render() {
        let view = <View style={GlobalStyles.root_container}>
            {this.renderContentView()}
        </View>;
        return view;
    }

}
const styles = StyleSheet.create({
    listRowTitle:{
        flexDirection: 'row',borderBottomWidth: 1,borderColor: '#ADADAD',
        padding: 5,paddingTop: 10,paddingBottom: 10,alignItems: 'center'
    },
    listRow:{
        flexDirection: 'row',justifyContent: 'flex-start',alignItems: 'flex-start',marginBottom: 5
    },
    listRowLabel: {
        width: 100,justifyContent: 'flex-start',flexDirection: 'row',alignItems: 'center'
    },
});
